{% assign defaultImageEmpty = 'banner@2x.png' | public_asset_abs_url   %}

{% stylesheet %}
.block_image {
    position: relative;
    max-width: var(--general_layout_width);
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.block_image .container_wrapper{
  padding:80px;
}
.block_image-fill .container_wrapper{
  padding:0px;
}
.block_image-fill {
    width: 100% !important;
    max-width: 100%;
}
.block_image a{
    width: 100%;
}
.image-size-big img {
    height: 800px;
    width: 100%;
    object-fit: cover;
}


.image-size-middle img {
    height: 560px;
    width: 100%;
    object-fit: cover;
}

.image-size-small img{
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.image-size-middle  .content-describe{
    margin-top:20px !important;
}

  .image-size-middle  .content-btn{
    margin-top:30px !important;
}

.image-size-small  .content-describe{
    margin-top:10px !important;
}

.image-size-small  .content-btn{
    margin-top:20px !important;
}
.image-size-auto img {
    height: auto;
    width: 100%;
    object-fit: cover;
}

.block_image .block_image-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}


.block_image-fill .block_image-content{
    max-width: 1200px !important;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
}

.block_image .block_image-content {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 110;
    box-sizing: border-box;
}

.block_image .content-position-center{
    align-items: center;
    text-align: center;
}
.block_image .content-position-center .content-describe{
    max-width: 800px;
}

.block_image .content-position-left{
    align-items: flex-start;
    text-align: left;
}

.block_image .content-position-left .content-describe{
  max-width: 380px;
}

.block_image .content-position-right{
    align-items: flex-end;
    text-align: right;
}
.block_image .content-align-right .content-describe{
  max-width: 380px;
}



.block_image .content-title {
    color: var(--title_color);
    color: #ffffff;
    font-size: var(--title_font_size);
    color: var(--title_color);
    font-family: var(--title_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
}

.block_image .content-describe {
margin-top: 30px;
font-size: 16px;
line-height: 24px;
color: #fff;
}


.block_image .content-align-right{
display: flex;
flex-direction: column;
align-items: flex-end;
text-align:right;
}

.block_image .content-align-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align:center;
}

.block_image .content-align-left{
display: flex;
flex-direction: column;
align-items: flex-start;
text-align:left;
}

.block_image .block-image-mobile{
    display: none;
}

.block_image .block_image-content{
  padding:0 50px;
}

@media screen and (max-width: 768px) {
    .block_image .content-title{
        font-size: calc(var(--title_font_size) * var(--wap_title_scale));
    }
    .block_image .slide-item .slide-item-des{
        font-size: 14px;
    }

    .block_image.image-size-big  img{
        height: 600px;
    }
    .block_image.image-size-middle img{
        height: 400px;
    }
    .block_image.image-size-samll img{
        height: 320px;
    }
    .block_image .block_image-content{
      padding:0 15px;
    }
}
@media screen and (max-width: 767px) {
    .block_slides .block-image-mobile{
        display: block;
    }
    .block_slides .block-image-pc{
        display: none;
    }
    .block_image.image-size-big  img{
        height: 100vh;
    }
    .block_image.image-size-middle img{
        height: 70vh;
    }
    .block_image.image-size-samll img{
        height: 50vh;
    }
    .block_image .block-image-mobile{
        display: block;
    }
    .block_image .block-image-pc{
        display: none;
    }

}
{% endstylesheet %}
<div class="block_image {% if section.settings.is_full %}block_image-fill{% endif %} image-size-{{ section.settings.height }}">
  <a href="{% if section.settings.slide_path.url %}{{ section.settings.slide_path.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}">
    <img {% unless section.settings.height == "auto" %}data-crop-type="height"{% endunless %}  data-src="{{ section.settings.web_image.src }}" src="{{ defaultImageEmpty }}" alt="{{ section.settings.web_image.alt }}" class="block-image-pc">

    <img {% unless section.settings.height == "auto" %}data-crop-type="height"{% endunless %} data-src="{{ section.settings.mobile_image.src | default:section.settings.web_image.src }}" src="{{ defaultImageEmpty }}" alt="{{ section.settings.mobile_image.alt }}" class="block-image-mobile">

    <div class="block_image-mask" style="background-color:{{ section.settings.mask_color }};opacity: {{ section.settings.mask_transparent | divided_by : 100  }};"></div>

    <div class="slide-content-{{ block_id | default : section.block_id }} block_image-content content-size-{{ section.settings.text_size }}  content-position-{{ section.settings.text_position }} {% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
      <div class="content-align-{{ section.settings.text_position }}">
        {% if section.settings.title %}<h2 class="content-title" style="color:{{ section.settings.title_color }}">{{ section.settings.title }}</h2>{% endif %}
        {% if section.settings.content %}<div class="content-describe" style="color:{{ section.settings.content_color }}">{{ section.settings.content }}</div>{% endif %}
        {% if section.settings.button_text %}
        <span class="content-btn main_btn" style="background-color:{{ section.settings.button_background_color }};color:{{ section.settings.button_font_color  }}" >{{ section.settings.button_text }}</span>
        {% endif %}
      </div>
    </div>
  </a>

</div>

{% schema %}
{
  "tag": "section",
  "class": "block_image",
  "is_global": false,
  "name": {
    "zh_CN": "单图"
  },
  "max_blocks": "",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "图片"
      }
    },
    {
      "type": "card_image",
      "label": {
        "zh_CN": "pc图片"
      },
      "info": {
        "zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420"
      },
      "id": "web_image"
    },
    {
      "type": "card_image",
      "label": {
        "zh_CN": "移动端图片"
      },
      "info": {
        "zh_CN": "尺寸建议1242*2000px"
      },
      "id": "mobile_image"
    },
    {
      "type": "card_page_link",
      "label": {
        "zh_CN": "跳转链接"
      },
      "id": "slide_path"
    },
    {
      "type": "card_select",
      "id": "height",
      "option": [
        {
          "label": {
            "zh_CN": "大"
          },
          "value": "big"
        },
        {
          "label": {
            "zh_CN": "中"
          },
          "value": "middle"
        },
        {
          "label": {
            "zh_CN": "小"
          },
          "value": "small"
        },
        {
          "label": {
            "zh_CN": "自适应"
          },
          "value": "auto"
        }
      ],
      "label": {
        "zh_CN": "图片高度"
      },
      "default": "middle"
    },
    {
      "type": "card_switch",
      "id": "is_full",
      "label": {
        "zh_CN": "宽度铺满"
      },
      "default": true
    },
    {
      "type": "card_slider",
      "id": "mask_transparent",
      "max": "100",
      "min": "1",
      "label": {
        "zh_CN": "蒙层不透明度"
      },
      "default": "40"
    },
    {
      "type": "card_color",
      "id": "mask_color",
      "label": {
        "zh_CN": "蒙层颜色"
      },
      "default": "#000"
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "内容"
      }
    },
    {
      "type": "card_input",
      "id": "title",
      "label": {
        "zh_CN": "标题"
      },
      "default": "Image with text overlay"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述"
      },
      "default": "Image with text overlay",
      "id": "content"
    },
    {
      "type": "card_select",
      "id": "text_position",
      "label": {
        "zh_CN": "标题按钮位置"
      },
      "option": [
        {
          "label": {
            "zh_CN": "居左"
          },
          "value": "left"
        },
        {
          "label": {
            "zh_CN": "居中"
          },
          "value": "center"
        },
        {
          "label": {
            "zh_CN": "居右"
          },
          "value": "right"
        }
      ],
      "default": "left"
    },
    {
      "type": "card_color",
      "id": "title_color",
      "label": {
        "zh_CN": "标题颜色"
      },
      "default": "#fff"
    },
    {
      "type": "card_color",
      "id": "content_color",
      "label": {
        "zh_CN": "内容颜色"
      },
      "default": "#fff"
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "按钮"
      }
    },
    {
      "type": "card_input",
      "id": "button_text",
      "label": {
        "zh_CN": "按钮标题"
      },
      "default": "show now"
    },
    {
      "type": "card_color",
      "id": "button_background_color",
      "label": {
        "zh_CN": "按钮背景"
      },
      "default": "#000"
    },
    {
      "type": "card_color",
      "id": "button_font_color",
      "label": {
        "zh_CN": "按钮文字"
      },
      "default": "#fff"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "web_image": {
        "src": "",
        "alt": ""
      },
      "mobile_image": {
        "src": "",
        "alt": ""
      },
      "slide_path": {
        "type": "",
        "title": "",
        "url": ""
      },
      "height": "middle",
      "is_full": true,
      "mask_transparent": "20",
      "mask_color": "#000",
      "title": "Image with text overlay",
      "content": "Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story",
      "text_position": "center",
      "text_align": "center",
      "text_size": "big",
      "title_color": "#fff",
      "content_color": "#fff",
      "button_text": "SHOP ALL",
      "button_background_color": "#000000",
      "button_font_color": "#fff"
    },
    "blocks": []
  }
}
{% endschema %}